<template>
    <div>
        <h3>插件定义</h3>
        <pre>
        - 用于统一定义和设置全局方法，全局属性，全局过滤器，全局指令，全局组件 ……
        - 构成方法依赖于插件安装方法 Vue.use() , 该方式将装载功能作为当模块安装至Vue全局功能上
        - Vue.use() 方法一般被定义在 main.js 文件中
        - Vue.use(options) 为一个固定构建对象
                {
                    install:function(Vue){
                        
                    }
                }
        </pre>
        <hr>
        <pre>
        - 过滤器 filter/index.js
            let formatDate = function (value, fmt = "yyyy-MM-dd hh:mm:ss") {……}
            let hideKeyChart = function(value,rule="3:5:3",repStr="*",pos="m"){……}
            export default {
                install(Vue){
                    Vue.filter("formatDate",formatDate);
                    Vue.filter("hideKeyChart",hideKeyChart);
                }
            }

        - 指令 directive/index.js
            let payload = function(el,options){……}
            export default {
                install(Vue){
                    Vue.directive("payload",payload)
                }
            }
        
        - main.js 安装
            import filter from './filter'
            import directive from './directive'

            Vue.use(filter);
            Vue.use(directive);
        </pre>
        <hr>
        <p>{{ day }}</p>
        <p>{{ day | formatDate }}</p>
        <p>{{ day | formatDate("yyyy年MM月dd日 hh:mm:ss") }}</p>
        <hr>
        <pre>
        - 提示插件 plugin/MessageBox.vue
            + 基于组件语法开发的组件文件
        - 提示插件方法定义 plugin/index.js
            import Vue from 'vue';
            import MessageBox from './MessageBox.vue';

            let Message = Vue.extend(MessageBox);
            let msg = function (msg,time) {
                let data = {};
                if(msg){
                    data.msg = msg;
                }
                if(time){
                    data.time = time;
                }
                new Message({
                    data:data
                }).$mount();
            }

            export default {
                // main.js 文件提供插件安装服务
                install(Vue){
                    Vue.prototype.$msg = msg
                },
                // 为独立使用提供调用的
                msg
            }
        - main.js 的安装和启用
            import plugin from './plugin'
            Vue.use(plugin);
        </pre>
        <hr>
        <input type="button" value="打开提示窗口" @click="showTip()">
        <hr>
    </div>
</template>

<script>
export default {
    data() {
        return {
            day:new Date()
        }
    },
    methods:{
        showTip(){
            this.$msg("传入的测试消息")
        }
    }
}
</script>